<template>
  <div class="stepW">
    <div class="step">
      <!-- 主胜 -->
      <div class="step_1 com" :style="victoryCountStyle">
        Pool: {{ $formatNum(victoryCount) > 0 ? $formatNum(victoryCount) : 0 }}
      </div>
      <!-- 平 -->
      <div class="step_3 com" :style="drawCountStyle">
        Pool: {{ $formatNum(drawCount) > 0 ? $formatNum(drawCount) : 0 }}
      </div>
      <!-- 客胜 -->
      <div class="step_2 com" :style="failCountStyle">
        Pool: {{ $formatNum(failCount) > 0 ? $formatNum(failCount) : 0 }}
      </div>
    </div>
  </div>
</template>
<script>
import BigNumber from 'bignumber.js'
import web3 from 'web3'

export default {
  props: ['game'],
  data () {
    return {
      bet: 300,
      victoryCount: 100, //胜利奖池数量
      failCount: 100,//失败奖池数量
      drawCount: 100,//平局奖池数量
      victoryCountStyle: '',
      failCountStyle: '',
      drawCountStyle: ''
    };
  },
  mounted () {

    // this.victoryCount=web3.utils.fromWei(this.item.betWinANum)
    // this.failCount= web3.utils.fromWei(this.item.betWinBNum)
    // this.drawCount= web3.utils.fromWei(this.item.betDrewNum)
  },
  watch: {
    game: {
      handler (val) {
        console.log(val)
        let victoryCount = new BigNumber(web3.utils.fromWei(val.betWinANum)).toFixed(4).toString()
        this.victoryCount = victoryCount
        let failCount = new BigNumber(web3.utils.fromWei(val.betWinBNum)).toFixed(4).toString()
        this.failCount = failCount
        let drawCount = new BigNumber(web3.utils.fromWei(val.betDrewNum)).toFixed(4).toString()
        this.drawCount = drawCount
        if (victoryCount == 0 && failCount == 0 && drawCount == 0) {// 0 0 0
          this.victoryCountStyle = `width:33.3%;border-top-left-radius: 40px;border-bottom-left-radius: 40px`
          this.drawCountStyle = `width:33.3%;`
          this.failCountStyle = `width:33.3%;border-top-right-radius: 40px;border-bottom-right-radius: 40px`
        }
        if (victoryCount != 0 && failCount != 0 && drawCount != 0) {// 1 1 1
          this.victoryCountStyle = `border-top-left-radius: 40px;border-bottom-left-radius: 40px;width:${this.victoryWidth}%`
          this.drawCountStyle = `width:${this.drawWidth}%;`
          this.failCountStyle = `border-top-right-radius: 40px;border-bottom-right-radius: 40px;width:${this.failWidth}%`
        }
        if (victoryCount == 0 && failCount != 0 && drawCount != 0) {//0 1 1
          this.victoryCountStyle = `display:none`
          this.drawCountStyle = `border-top-left-radius: 40px;border-bottom-left-radius: 40px;width:${this.drawWidth}%`
          this.failCountStyle = `border-top-right-radius: 40px;border-bottom-right-radius: 40px;width:${this.failWidth}%`
        }

        if (victoryCount != 0 && failCount == 0 && drawCount != 0) {//1 0 1

          this.victoryCountStyle = `border-top-left-radius: 40px;border-bottom-left-radius: 40px;width:${this.victoryWidth}%`
          this.failCountStyle = `display:none`
          this.drawCountStyle = `border-top-right-radius: 40px;border-bottom-right-radius: 40px;width:${this.drawWidth}%`
        }

        if (victoryCount != 0 && failCount != 0 && drawCount == 0) { //1 1 0
          this.victoryCountStyle = `border-top-left-radius: 40px;border-bottom-left-radius: 40px;width:${this.victoryWidth}%`
          this.failCountStyle = `border-top-right-radius: 40px;border-bottom-right-radius: 40px;width:${this.failWidth}%`
          this.drawCountStyle = `display:none`
        }

        if (victoryCount != 0 && failCount == 0 && drawCount == 0) { // 1 0 0
          console.log(this.victoryWidth)
          this.victoryCountStyle = `border-radius:40px;width:${this.victoryWidth}%`
          this.failCountStyle = `display:none`
          this.drawCountStyle = `display:none`
        }

        if (victoryCount == 0 && failCount != 0 && drawCount == 0) { // 0 1 0
          this.victoryCountStyle = `display:none`
          this.failCountStyle = `border-radius:40px;width:${this.failWidth}%`
          this.drawCountStyle = `display:none`
        }

        if (victoryCount == 0 && failCount == 0 && drawCount != 0) { // 0 0 1
          this.victoryCountStyle = `display:none`
          this.failCountStyle = `display:none`
          this.drawCountStyle = `border-radius:40px;width:${this.drawWidth}%`
        }
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    victoryWidth () {
      console.log(this.game)
      if (this.victoryCount == '0' && this.failCount == '0' && this.drawCount == '0') {
        return 33.33
      }
      return Number(this.victoryCount) / Number(this.game.exceptSelfNum) * 100
    },
    failWidth () {
      if (this.victoryCount == '0' && this.failCount == '0' && this.drawCount == '0') {
        return 33.33
      }
      return Number(this.failCount) / Number(this.game.exceptSelfNum) * 100
    },
    drawWidth () {
      console.log(this.drawCount.length)
      if (this.victoryCount == '0' && this.failCount == '0' && this.drawCount == '0') {
        return 33.33
      }
      return Number(this.drawCount) / Number(this.game.exceptSelfNum) * 100
    },
  }
};
</script>
<style scoped lang='scss'>
.stepW {
  width: 1110px;
  height: 40px;
}
.step {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 40px;
  border-radius: 40px;
  overflow: hidden;
  background: #dae2ea;
  .com {
    height: 40px;
    line-height: 40px;
    text-align: center;
    // width: 250px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
  }
  .step_1 {
    background-color: #2587cf;
    // border-top-left-radius: 40px;
    // border-bottom-left-radius: 40px;
  }
  .step_2 {
    background-color: #df393b;
  }

  .step_3 {
    background-color: #a0a0a0;
    // border-top-right-radius: 40px;
    // border-bottom-right-radius: 40px;
  }
}
</style>